﻿<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>&#128295; Walkthrough Advanced: Customize Your Website | DocFX website </title>
    <meta name="viewport" content="width=device-width">
    <meta name="title" content="&#128295; Walkthrough Advanced: Customize Your Website | DocFX website ">
    <meta name="generator" content="docfx 2.37.0.0">
    
    <link rel="shortcut icon" href="../../favicon.ico">
    <link rel="stylesheet" href="../../styles/docfx.vendor.css">
    <link rel="stylesheet" href="../../styles/docfx.css">
    <link rel="stylesheet" href="../../styles/main.css">
    <meta property="docfx:navrel" content="../../toc.html">
    <meta property="docfx:tocrel" content="../toc.html">
    
    <meta property="docfx:rel" content="../../">
    
  </head>
  <body data-spy="scroll" data-target="#affix" data-offset="120">
    <div id="wrapper">
      <header>
        
        <nav id="autocollapse" class="navbar navbar-inverse ng-scope" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              
              <a class="navbar-brand" href="../../index.html">
                <img id="logo" class="svg" src="../../logo.svg" alt="">
              </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
              <form class="navbar-form navbar-right" role="search" id="search">
                <div class="form-group">
                  <input type="text" class="form-control" id="search-query" placeholder="Search" autocomplete="off">
                </div>
              </form>
            </div>
          </div>
        </nav>
        
        <div class="subnav navbar navbar-default">
          <div class="container hide-when-search" id="breadcrumb">
            <ul class="breadcrumb">
              <li></li>
            </ul>
          </div>
        </div>
      </header>
      <div class="container body-content">
        
        <div id="search-results">
          <div class="search-list"></div>
          <div class="sr-items">
            <p><i class="glyphicon glyphicon-refresh index-loading"></i></p>
          </div>
          <ul id="pagination"></ul>
        </div>
      </div>
      <div role="main" class="container body-content hide-when-search">
        
        <div class="sidenav hide-when-search">
          <a class="btn toc-toggle collapse" data-toggle="collapse" href="#sidetoggle" aria-expanded="false" aria-controls="sidetoggle">Show / Hide Table of Contents</a>
          <div class="sidetoggle collapse" id="sidetoggle">
            <div id="sidetoc"></div>
          </div>
        </div>
        <div class="article row grid-right">
          <div class="col-md-10">
            <article class="content wrap" id="_content" data-uid="">
<h1 id="-walkthrough-advanced-customize-your-website">🔧 Walkthrough Advanced: Customize Your Website</h1>

<h2 id="apply-your-own-styles-to-the-website-or-pdf">Apply your own styles to the website or PDF</h2>
<h3 id="export-the-default-template">Export the default template</h3>
<p>To export the default HTML template, open the command line at the root of the directory and run <code>docfx template export default</code>.</p>
<p>A folder called <code>_exported_templates</code> is added at root with a directory inside called <code>default</code>. This is the DocFX default HTML template.</p>
<p>To export the default PDF template, run <code>docfx template export pdf.default</code>.</p>
<h3 id="create-a-new-template">Create a new template</h3>
<p>Create a new directory at root to hold your custom templates - name it something like <code>templates</code>. Inside that folder, create a new folder and name it wantever you want to name your custom template. In this folder you'll replicate files from <code>_exported_templates/default</code> or <code>_exported_templates/pdf.default</code> (and only those files) you want to overwrite.</p>
<h3 id="apply-the-template">Apply the template</h3>
<p>To apply your custom HTML template permanently, add the following to <code>docfx.json</code> at the root of the project inside <code>&quot;build&quot;: {</code>:</p>
<pre><code>    &quot;template&quot;: [
      &quot;default&quot;,
      &quot;templates/&lt;name of your your HTML template folder&gt;&quot;
    ],
</code></pre>
<p>To apply your custom PDF template permanently, add the following at the same level as <code>&quot;content&quot;</code> under <code>&quot;pdf&quot;</code>:</p>
<pre><code>    &quot;template&quot;: [
      &quot;pdf.default&quot;,
      &quot;templates/pdf&quot;
    ],
</code></pre>
<p>To apply a template manually, append a <code>-t</code> with the template filepath to the build command:</p>
<p><code>docfx build docfx.json -t C:\&lt;filepath&gt;\templates\&lt;your custom template folder&gt; --serve</code></p>
<h3 id="customize-your-template">Customize your template</h3>
<p>Inside the <code>_exported_templates/default</code> or <code>exported_templates/pdf.default</code> folder, copy any file you want to overwrite with your custom template. Paste it in your custom template folder, replicating the directory structure.</p>
<p>For example, to change the copyright in the footer of the HTML template:</p>
<ul>
<li>Copy <code>_exported_templates/default/partials/footer.tmpl.partial</code>.</li>
<li>Paste it in <code>templates/&lt;your custom template folder&gt;/partials</code>.</li>
<li>Edit <code>templates/&lt;your custom template folder&gt;/partials</code>.</li>
</ul>
<p>To change the CSS of the HTML or PDF template:</p>
<ul>
<li>Copy <code>_exported_templates/default/styles/main.css</code> or <code>_exported_templates/pdf.default/styles/main.css</code>.</li>
<li>Paste it in <code>templates/&lt;your custom template folder&gt;/styles</code>.</li>
<li>Edit <code>templates/&lt;your custom template folder&gt;/partials</code>.</li>
</ul>
<p>Example of changing heading styles in <code>main.css</code> for an HTML template:</p>
<pre><code>article h1 {
  font-size: 40px;
  font-weight: 300;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #000000;
}
</code></pre>
<p>Example of preventing words from breaking across lines for an HTML template:</p>
<pre><code>article h1, h2, h3, h4, h5, h6 {
  word-break: keep-all;
}
</code></pre>
<p>Example of changing heading styles for a PDF template:</p>
<pre><code>h1 {
    font-weight: 200;
    color: #007bb8;
}
</code></pre>
<p>To change the look of the table of contents in the PDF template, use this file: <code>_exported_templates/default/toc.html.tmpl</code></p>
<h2 id="see-a-list-of-all-your-templates">See a list of all your templates</h2>
<p><code>docfx template list</code></p>
<h2 id="see-template-commands">See template commands</h2>
<p><code>docfx help template</code></p>
<div id="disqus_thread"></div>
                <script>
                (function() { // DON'T EDIT BELOW THIS LINE
                var d = document, s = d.createElement('script');
                s.src = 'https://docfx-github.disqus.com/embed.js';
                s.setAttribute('data-timestamp', +new Date());
                (d.head || d.body).appendChild(s);
                })();
                </script>
                <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
            </article>
          </div>
          
          <div class="hidden-sm col-md-2" role="complementary">
            <div class="sideaffix">
              <div class="contribution">
                <ul class="nav">
                  <li>
                    <a href="#disqus_thread" class="contribution-link">0 Comments</a>
                  </li>
                </ul>
              </div>
              <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix" id="affix">
              <!-- <p><a class="back-to-top" href="#top">Back to top</a><p> -->
              </nav>
            </div>
          </div>
        </div>
      </div>
      
      <footer>
        <div class="grad-bottom"></div>
        <div class="footer">
          <div class="container">
            <span class="pull-right">
              <a href="#top">Back to top</a>
            </span>
            <span>Copyright © 2015-2018 Microsoft<br>Generated by <strong>DocFX</strong></span>
            
          </div>
        </div>
      </footer>
    </div>
    
    <script type="text/javascript" src="../../styles/docfx.vendor.js"></script>
    <script type="text/javascript" src="../../styles/docfx.js"></script>
    <script type="text/javascript" src="../../styles/main.js"></script>
    <script id="dsq-count-scr" src="//docfx-github.disqus.com/count.js" async=""></script>
    
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-99241001-1', 'auto');
      ga('send', 'pageview');
    
    </script>
  </body>
</html>
